<template>
  <el-row>
    <!-- 头部 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <el-breadcrumb :separator-icon="ArrowRightBold">
          <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
    </el-col>
    <div style="padding: 5px;"></div>
    <!-- 内容区域 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <template #header>
          <div style="display: flex; align-items: center;justify-content: space-between;">
            <div style="display: flex; align-items: center;">
              <el-button type="primary" @click="usersDialog = true">添加用户</el-button>
              <div style="padding: 5px;"></div>
              <el-input style="width: 260px;" v-model="inputval" placeholder="请输入 UID、手机、昵称、备注、ip" />
              <div style="padding: 5px;"></div>

              <el-select    style="width: 150px;" v-model="group_id" placeholder="请选择用户分组">
                <el-option label="全部" value="">全部</el-option>
                <el-option label="未分组" value="0">未分组</el-option>
                <el-option :label="item.name" :value="item.id" v-for="item in group.list">{{item.name}}</el-option>
              </el-select>
              <div style="padding: 5px;"></div>
              <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>

            </div>
            <div style="float:right;">
              只显示真人
              <el-tooltip :content="page.role == 1 ? '是' : '否'" placement="top">
                <el-switch v-model="page.role" :active-value="1" :inactive-value="0"  @change="changeIsJr"></el-switch>
              </el-tooltip>

              <span style="margin-left:10px;">只显示告警用户</span>
              <el-tooltip :content="page.is_gj == 1 ? '是' : '否'" placement="top">
                <el-switch v-model="page.is_gj" :active-value="1" :inactive-value="0"  @change="changeIsJg"></el-switch>
              </el-tooltip>
              <span style="margin-left:10px;">只显示在线用户</span>
              <el-tooltip :content="page.is_zx == 1 ? '是' : '否'" placement="top">
                <el-switch v-model="page.is_zx" :active-value="1" :inactive-value="0"  @change="changeIsZx"></el-switch>
              </el-tooltip>
            </div>

          </div>
        </template>

        <!-- 表格 -->
        <el-table :data="tableData.list" :border="true" style="width: 100%">
          <el-table-column prop="id" label="序号" width="50" />
          <el-table-column label="头像" min-width="60">
            <template #default="scope">
              <div><img v-if="scope.row.headimgurl" :src="scope.row.headimgurl" style="width: 40px;height:40px;border-radius: 50%"></div>
            </template>
          </el-table-column>
          <el-table-column label="用户信息" min-width="230">
            <template #default="scope">
              <div>UID：{{scope.row.uid}}</div>
              <div>昵称：{{scope.row.nickname}}</div>
              <div v-if="scope.row.account">用户名：{{scope.row.account}}</div>
              <div>手机：{{scope.row.phone?scope.row.phone:'未绑定'}}</div>
              <div>余额：{{scope.row.money}}</div>
              <div>彩金：{{scope.row.voucher}}</div>
              <div>积分：{{scope.row.points}}</div>
            </template>
          </el-table-column>

          <el-table-column label="注册信息" min-width="250">
            <template #default="scope">
              <div>
                注册来源：
                <el-tag type="success" v-if="scope.row.source == 1">微信</el-tag>
                <el-tag v-if="scope.row.source == 2">手机</el-tag>
              </div>
              <div>注册时间：{{scope.row.create_time}}</div>
              <div>注册 ip ：{{scope.row.register_ip}}</div>
              <div>归 属 地：{{scope.row.address}}</div>
              <div>登录 ip ：{{scope.row.ip}}</div>
              <div>登录时间：{{scope.row.last_online_time}}</div>
              <div>在线状态：<span v-if="scope.row.is_online">🟢</span><span v-else>🟤</span></div>
            </template>
          </el-table-column>

          <el-table-column label="其它信息" min-width="150">
            <template #default="scope">
              <div>等级：VIP{{scope.row.vip}}</div>
              <div>备注：{{scope.row.remark}}</div>
              <div>分组：
                <text v-if="scope.row.group">{{scope.row.group.name}}</text>
                <text v-else>-</text>
                <div>上级：
                  <text v-if="scope.row.agent">
                    {{scope.row.agent.nickname}}/{{scope.row.agent.remark}}

                  </text>
                  <text v-else>-</text>
                </div>

              </div>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="160">
            <template #default="scope">
              <!--                <div >vip:-->
              <!--                  <el-tag type="success" plain v-if="scope.row.vip>0">{{scope.row.vipInfo.name}}</el-tag>-->
              <!--                  <el-tag type="danger" plain v-else>无</el-tag>-->
              <!--                </div>-->
              <div>代理：<el-tag type="success" plain v-if="scope.row.is_agent">已开通</el-tag>
                <el-tag type="danger" plain v-else>未开通</el-tag>
              </div>
              <div>状态：
                <el-tooltip :content="scope.row.status == 1 ? '状态正常' : '状态关闭'" placement="top">
                  <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                             @change="admin_users_status(scope.row.uid, scope.row.status)"></el-switch>
                </el-tooltip>
              </div>
              <div>假人：
                <el-tooltip :content="scope.row.role == 1 ? '内部账号' : '普通账号'" placement="top">
                  <el-switch v-model="scope.row.role" :active-value="1" :inactive-value="0"
                             @change="admin_users_role(scope.row.uid, scope.row.role)">
                  </el-switch>
                </el-tooltip>
              </div>
              <div>告警：
                <el-tooltip :content="scope.row.is_gj == 1 ? '开' : '关'" placement="top">
                  <el-switch v-model="scope.row.is_gj" :active-value="1" :inactive-value="0"
                             @change="admin_users_gj(scope.row.uid, scope.row.is_gj)">
                  </el-switch>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="320">
            <template #default="scope">

              <el-button type="danger" @click="adminUsersMoney(scope.row)" v-if="btn_auth.yue && scope.row.phone">余额</el-button>
              <el-button type="success" @click="adminUsersProxy(scope.row)" v-if="btn_auth.agent && scope.row.phone">代理</el-button>
              <el-button type="warning" @click="adminUsersPass(scope.row)" v-if="btn_auth.edit && scope.row.phone">编辑</el-button>

              <el-popconfirm title="确定删除该用户?" @confirm="admin_users_delete(scope.row.uid)" v-if="btn_auth.del">
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
              <!-- <el-button type="danger" @click="adminUsersDelete(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页 -->

        <div style="padding: 10px;"></div>
        <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                       :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                       :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

      </el-card>
    </el-col>
  </el-row>

  <!-- 添加用户 -->
  <el-dialog v-model="usersDialog" title="添加用户" center width="38%" :destroy-on-close="true">
    <el-form label-width="80px">

      <el-form-item label="手机号码">
        <el-input v-model="userData.phone" placeholder="手机号码" />
      </el-form-item>
      <el-form-item label="登录密码">
        <el-input v-model="userData.password" placeholder="登录密码(8至16位)" />
      </el-form-item>

      <el-form-item label="确认登录密码">
        <el-input v-model="userData.passwords" placeholder="登录密码(8至16位)" />
      </el-form-item>

    </el-form>

    <template #footer>
      <el-button type="primary" @click="userSubmit()">确定</el-button>
    </template>
  </el-dialog>

  <!-- 菜单权限管理 -->
  <el-dialog v-model="agentDialog" title="设置代理" center width="38%" :destroy-on-close="true">
    <el-form label-width="130px">

      <el-form-item label="昵称">
        <el-input v-model="foemData.username" :disabled="true" />
      </el-form-item>
      <el-form-item label="UID">
        <el-input v-model="foemData.uid" :disabled="true" />
      </el-form-item>

      <el-form-item label="开通代理">
        <el-tooltip :content="foemData.is_agent == 1 ? '开通' : '关闭'" placement="top">
          <el-switch v-model="foemData.is_agent" :active-value="1" :inactive-value="0"></el-switch>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="暂停返佣">
        <el-tooltip :content="foemData.agent_ztfy == 1 ? '暂停' : '正常'" placement="top">
          <el-switch v-model="foemData.agent_ztfy" :active-value="1" :inactive-value="0"></el-switch>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="1级下线佣金费率">
        <el-input type="number" v-model="foemData.agent_rate" />
      </el-form-item>
      <el-form-item label="2级下线佣金费率">
        <el-input type="number" v-model="foemData.agent_rate2" />
      </el-form-item>
      <el-form-item label="3级下线佣金费率">
        <el-input type="number" v-model="foemData.agent_rate3" />
      </el-form-item>

    </el-form>

    <template #footer>
      <el-button type="primary" @click="formSubmit()">确定</el-button>
    </template>
  </el-dialog>

  <!-- 菜单权限管理 -->
  <el-dialog v-model="moneyDialog" title="资金变动" center width="38%" :destroy-on-close="true">
    <el-form label-width="80px">

      <el-form-item label="用户名">
        <el-input v-model="moneyData.username" :disabled="true" />
      </el-form-item>
      <el-form-item label="用户UID">
        <el-input v-model="moneyData.uid" :disabled="true" />
      </el-form-item>
      <el-form-item label="当前余额">
        <el-input type="number" v-model="moneyData.money" :disabled="true" />
      </el-form-item>
      <el-form-item label="当前彩金">
        <el-input type="number" v-model="moneyData.voucher" :disabled="true" />
      </el-form-item>
      <el-form-item label="当前积分">
        <el-input type="number" v-model="moneyData.points" :disabled="true" />
      </el-form-item>
      <el-form-item label="修改类型">
        <el-select   v-model="moneyData.type" placeholder="请选择" style="width: 100%;">
          <!-- 彩金类型固定排在第一位 -->
          <el-option
              v-for="item in [
                {label:'彩金', val:'voucher'},
                {label:'余额', val:'money'},
                {label:'积分', val:'points'}
              ]"
              :key="item.val"
              :label="item.label"
              :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="增加余额" v-if="moneyData.type=='money'">
        <el-input type="number" v-model="moneyData.addmoney" />
      </el-form-item>
      <el-form-item label="减少余额" v-if="moneyData.type=='money'">
        <el-input type="number" v-model="moneyData.submoney" />
      </el-form-item>

      <el-form-item label="增加彩金" v-if="moneyData.type=='voucher'">
        <el-input type="number" v-model="moneyData.addmoney" />
      </el-form-item>
      <el-form-item label="减少彩金" v-if="moneyData.type=='voucher'">
        <el-input type="number" v-model="moneyData.submoney" />
      </el-form-item>
      <el-form-item label="增加积分" v-if="moneyData.type=='points'">
        <el-input type="number" v-model="moneyData.addmoney" />
      </el-form-item>
      <el-form-item label="减少积分" v-if="moneyData.type=='points'">
        <el-input type="number" v-model="moneyData.submoney" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button type="primary" @click="formSubmitMoney()" :disabled="submitLock">确定</el-button>
    </template>
  </el-dialog>


  <!-- 修改密码 -->
  <el-dialog v-model="passsDialog" title="编辑用户" center width="38%" :destroy-on-close="true">
    <el-form label-width="120px">
      <el-form-item label="用户头像">

        <!--            <el-input type="text" disabled placeholder="图片尺寸要求：670*275px">-->
        <!--              <template #append>-->
        <!--                <el-button @click="ImageUpload()">选择图片</el-button>-->
        <!--              </template>-->
        <!--            </el-input>-->

        <div style="display: flex; flex-direction: column; position: relative;">
          <div
              style=" width: 80px; height: 80px; border-radius: 50%;margin-top: 5px;cursor:pointer;" @click="ImageUpload()">
            <img style="width: 80px; height: 80px; border-radius: 50%;" :src="imageUrl" v-if="passData.headimgurl" />
            <div v-else style="width: 80px; height: 80px; border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 28px;border:1px solid #ccc">
              +
            </div>
          </div>

        </div>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="passData.phone" :disabled="true" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="passData.nickname" />
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="passData.password" />
      </el-form-item>
      <el-form-item label="上级代理UID">
        <el-input v-model="passData.agent_uid"/>
      </el-form-item>
      <el-form-item label="上级昵称">
        <el-input v-model="passData.agent.nickname" disabled/>
      </el-form-item>
      <el-form-item label="上级手机号">
        <el-input v-model="passData.agent.phone" disabled/>
      </el-form-item>
      <el-form-item label="上级备注名">
        <el-input v-model="passData.agent.remark" disabled/>
      </el-form-item>
      <el-form-item label="用户分组">
        <el-select   style="width: 150px;" v-model="passData.group_id" placeholder="请选择用户分组">
          <el-option label="未分组" :value="0">未分组</el-option>
          <el-option :label="item.name" :value="item.id" v-for="item in group.list">{{item.name}}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户备注">
        <el-input v-model="passData.remark" />
      </el-form-item>
      <el-form-item label="vip">
        <el-select    style="width: 150px;" v-model="passData.vip" placeholder="请选择vip等级">

          <el-option :label="item.name" :value="item.level" v-for="item in vip.list">{{item.name}}</el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button type="primary" @click="formSubmitPass()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>

import {ref, reactive, onMounted, inject} from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, Coin, Setting, UserFilled, Search } from '@element-plus/icons-vue'

let btn_auth = []

const submitLock = ref(false)
const agentDialog = ref(false)
const passsDialog = ref(false)
const moneyDialog = ref(false)
const usersDialog = ref(false)
const tableData = reactive({ list: [] })
const group = reactive({ list: [] })
const vip = reactive({ list: [] })
const group_id = ref('')

const passData = reactive({
  uid: null,
  nickname: '',
  password: '',
  agent_uid: '',
  group_id: '',
  vip:'',
  remark: '',
  agent:{}
})

const userData = reactive({
  phone: '',
  password: '',
  passwords: ''
})

const foemData = reactive({
  uid: null,
  username: '',
  is_agent: null,
  agent_ztfy: null,
  agent_rate: null,
  agent_rate2: null,
  agent_rate3: null
})

const moneyData = reactive({
  uid: null,
  username: '',
  money: null,
  voucher: null,
  type: 'voucher',
  addmoney: null,
  submoney: null,
  points:null
})

const inputval = ref('')

const is_jr  = ref(0)

function inputSearch() {

  page.uid = inputval.value
  page.group_id = group_id.value
  admin_users_index()
}

const page = reactive({
  uid: null,
  group_id:null,
  pagenum: 1,
  pagesize: 18,
  total: 0,
  role: 0,
  is_gj:0,
  is_zx:0

})
function changeIsZx(e){

  localStorage.setItem('is_zx',e)
  page.is_zx = e
  admin_users_index()
}
function changeIsJr(e){

  localStorage.setItem('is_jr',e)
  page.role = e
  admin_users_index()
}

function changeIsJg(e){

  localStorage.setItem('is_jg',e)
  page.is_gj = e
  admin_users_index()
}

onMounted(() => {
  page.role = Number(localStorage.getItem('is_jr'))||0;
  page.is_gj = Number(localStorage.getItem('is_jg'))||0;
  page.is_zx = Number(localStorage.getItem('is_zx'))||0;
  admin_users_index()

})



// 获取用户列表
function admin_users_index() {
  request_post('/admin_users_index', page).then((res) => {
    if (res.data.code == 200) {

      tableData.list = res.data.data.data
      page.total = res.data.data.total
      group.list = res.data.data.group_list
      vip.list = res.data.data.vip_list
      btn_auth = res.data.data.btn_auth
    } else {
      return error(res.data.msg)
    }
  })
}
// 修改密码
function adminUsersPass(item) {
  imageUrl.value = item.headimgurl
  passData.headimgurl = item.headimgurl
  passData.uid = item.uid
  passData.phone = item.phone
  passData.nickname = item.nickname
  passData.agent_uid = item.agent.uid
  passData.group_id = item.group_id
  passData.vip = item.vip
  passData.remark = item.remark
  passData.agent = item.agent
  passsDialog.value = true
}

function formSubmitPass() {
  admin_users_passs()
}

// 修改密码
function admin_users_passs() {

  request_post('/admin_users_passs', passData).then((res) => {
    if (res.data.code == 200) {
      passsDialog.value = false
      admin_users_index()
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })

}

// 删除用户
function admin_users_delete(uid) {
  request_post('/admin_users_delete', { uid: uid }).then((res) => {

    if (res.data.code == 200) {
      passsDialog.value = false
      admin_users_index()
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })

}

// 修改用户状态
function admin_users_status(uid, status) {

  request_post('/admin_users_status', { uid, status }).then((res) => {
    if (res.data.code == 200) {
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })

}

//告警开关
function admin_users_gj(uid, gj){
  request_post('/admin_users_gj', { uid, gj }).then((res) => {
    if (res.data.code == 200) {
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })
}
// 启用内部账户
function admin_users_role(uid, role) {

  request_post('/admin_users_role', { uid, role }).then((res) => {
    if (res.data.code == 200) {
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })

}

// 设置为代理
function formSubmit() {

  request_post('/admin_users_proxy', foemData).then((res) => {
    if (res.data.code == 200) {
      agentDialog.value = false
      admin_users_index()
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })
}

// 设置为代理
function userSubmit() {

  request_post('/admin_users_create', userData).then((res) => {
    if (res.data.code == 200) {
      usersDialog.value = false
      admin_users_index()
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })
}

// 修改余额
function formSubmitMoney() {
  
  if(!submitLock.value){
    submitLock.value = true
    request_post('/admin_users_money_edit', moneyData).then((res) => {
        
        //location.reload()
        if (res.data.code == 200) {
          moneyDialog.value = false
          submitLock.value = false
          admin_users_index()
          return success(res.data.msg)
        } else {
          return error(res.data.msg)
        }
      })
  }
  
}

// 余额充值
function adminUsersMoney(item) {
  moneyDialog.value = true
  moneyData.uid = item.uid
  moneyData.type ='voucher'
  moneyData.username = item.nickname
  moneyData.money = item.money
  moneyData.voucher = item.voucher
  moneyData.points = item.points
  moneyData.addmoney = null
  moneyData.submoney = null
}

// 代理设置
function adminUsersProxy(item) {
  agentDialog.value = true
  foemData.uid = item.uid
  foemData.username = item.nickname
  foemData.is_agent = item.is_agent
  foemData.agent_ztfy = item.agent_ztfy
  foemData.agent_rate = item.agent_rate
  foemData.agent_rate2 = item.agent_rate2
  foemData.agent_rate3 = item.agent_rate3
}



function handleSizeChange(val) {
  page.pagenum = val
  admin_users_index()
}
function handleCurrentChange(val) {
  page.pagenum = val
  admin_users_index()
}

const imageModel = inject('showImageModel')
const imageUrl = ref(inject('imageUrl'))
// 图片上传
function ImageUpload() {
  imageModel()
  console.log(imageUrl,'headimgurl')
  passData.headimgurl = imageUrl
}

</script>

<style></style>
